<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>帖子显示页面</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <link href="layui-v2.6.4/layui/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="layui-v2.6.4/layui/css/modules/code.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="layui-v2.6.4/layui/layui.js" type="text/javascript"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });

        /**
         * 跳转到详细信息页面
         * @param e
         */
        function toThisEnt(ele) {
            location.assign("/toArticleInfo?id=" + ele)
        }


        //跳转到发布帖子的页面
        function toAddForum() {
            location.assign("/toAddForum")

        }


        function xianshi(e) {
            layer.tips($(e).text(), "#" + e.id, {
                tips: [
                    Math.floor(Math.random() * 3) + 1,
                    '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6)
                ]
            })
        }

        function show(e) {
            if ($(e).children().text() == '〉') {
                $(e).next().addClass("layui-show")
                $(e).children().text("﹀")
            } else {
                $(e).next().removeClass("layui-show")
                $(e).children().text("〉")
            }
        }
    </script>
</head>
<body>
<div class="div_top" th:replace="include/top"></div>
<div class="layui-container">
    <div class="layui-btn layui-icon layui-btn-normal" onclick="toAddForum()"
         style="border-radius: 25px;height: 50px;padding-top: 5px;position: fixed;right: calc(3% + 3px);top: 225px;z-index: 15;">
        &#xe624;
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;border-color: #3e0656;">
        <legend>热门论贴</legend>
    </fieldset>
    <div class="layui-collapse" id="searchRongqi" lay-accordion></div>
</div>
<script th:inline="javascript" type="text/javascript">
    var forumidList = /*[[${session.forumidList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var userIdList = /*[[${session.userIdList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var foTitleList = /*[[${session.foTitleList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var foDateList = /*[[${session.foDateList}]]*/ [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    var pages = /*[[${session.LeisureEntrustspages}]]*/2;
    layui.use('flow', function () {
        var flow = layui.flow;
        flow.load({
            elem: '#searchRongqi', //流加载容器
            scrollElem: '#searchRongqi',
            isAuto: true,
            isLazyimg: true,
            end: '到底了哦',
            done: function (page, next) {
                setTimeout(function () {
                    var lis = [];
                    var limit = 5;
                    if (page == pages) {
                        limit = forumidList.length - 5 * (page - 1);
                    }
                    for (var i = 0; i < limit; i++) {
                        lis.push(
                            '<div class="layui-colla-item" style="border: 1px solid #8D8D8D;margin: 3px;border-radius: 10px">\n' +
                            '<div class="" style="color: #888888;margin-left: 20px"><i class="layui-icon">&#xe770;&nbsp;</i>编号' + forumidList[eval((page - 1) * 5 + i)] + '</div>\n' +
                            '<h2 class="layui-colla-title" onclick="show(this)"><b>〉</b>&nbsp;&nbsp;' + foTitleList[eval((page - 1) * 5 + i)] + '</h2>\n' +
                            '<div class="layui-colla-content layui-row">\n' +
                            '<div class="layui-col-md1">发帖人id:' + userIdList[eval((page - 1) * 5 + i)] + '</div>\n' +
                            '<div class="layui-col-md9 layui-elip">内容:' + foDateList[eval((page - 1) * 5 + i)] + '</div>\n' +
                            '<div class="layui-col-md2 layui-elip" style="color: #087924"  onclick="toThisEnt(' + forumidList[eval((page - 1) * 5 + i)] + ')">&nbsp;查看详情</div>\n' +
                            '</div>\n' +
                            '</div>'
                        )
                    }
                    next(lis.join(''), page < pages);
                }, 500);
            }
        });
    });
</script>

</body>
</html>
